<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Markdown站点{% endblock %}</title>
    <!-- 加载必要的CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/css/editormd.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.13.2/themes/base/jquery-ui.min.css">
    <style>
        .markdown-body {
            margin: 20px auto;
            padding: 20px;
            max-width: 900px;
            border: 1px solid #eee;
            border-radius: 5px;
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        {% block content %}
        {% endblock %}
    </div>

    <!-- 按正确顺序加载JS -->
    <!-- 1. 先加载jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <!-- 2. 加载jQuery UI (解决$.widget问题) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.13.2/dist/jquery-ui.min.js"></script>
    <!-- 3. 加载marked.js (必须放在editormd之前) -->
    <script src="https://cdn.jsdelivr.net/npm/marked@4.0.0/marked.min.js"></script>
    <!-- 4. 加载其他依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/prettify@1.0.0/prettify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/raphael@2.3.0/raphael.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-min.js"></script>
    <!-- 5. 加载editormd主库 -->
    <script src="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/editormd.min.js"></script>

    <script>
    // 确保所有依赖加载完成
    $(document).ready(function() {
        // 检查marked是否加载
        if (typeof marked === 'undefined') {
            console.error('marked.js未正确加载');
            return;
        }
        
        // 检查editormd是否加载
        if (typeof editormd === 'undefined') {
            console.error('editormd未正确加载');
            return;
        }
        
        // 初始化Markdown渲染
        $('.markdown-body').each(function() {
            var markdownContainer = $(this).attr('id');
            
            editormd.markdownToHTML(markdownContainer, {
                htmlDecode      : "style,script,iframe",
                emoji           : true,
                taskList        : true,
                tex             : true,
                flowChart       : true,
                sequenceDiagram : true,
                path           : "https://cdn.jsdelivr.net/npm/editor.md@1.5.0/lib/"
            });
        });
    });
    </script>
</body>
</html>
